<template>
	<div class="app-content">
		<div class="app-main border--all">
			<div class="plan-view plan-add-planning">
				<div class="plan-left border--right">
					<div class="app-content">
						<div class="app-main has-footer-bar padding-20">
							<div class="vi-view-title">关键提示词</div>
							<div class="plan-add-planning--inputs" v-loading="planInfoLoading">
								<el-form :inline="true" :model="queryParams">
									<el-form-item label="目标受众" required class="el-form-item-line">
										<!--										<el-input v-model="queryParams.name" class="input-1" placeholder="引进人数" />-->
										<el-icon class="plan-add-planning--refresh" @click="getPlanTagType">
											<Refresh />
										</el-icon>
									</el-form-item>
									<el-form-item>
										<div class="plan-add-planning--view">
											<div class="plan-add-planning--tags padding-5 border--all">
												<el-tag class="plan-add-planning--tag margin-5"
													v-for="(tag, index) in queryParams.tags" :key="tag"
													@close="deleteTag(tag, index)" closable>
													{{ tag }}
												</el-tag>
											</div>
											<!--											<el-icon class="plan-add-planning&#45;&#45;refresh">-->
											<!--												<Refresh />-->
											<!--											</el-icon>-->
										</div>
									</el-form-item>
									<el-form-item label="场景" required>
										<!--										<div class="plan-add-planning&#45;&#45;view plan-add-planning&#45;&#45;view&#45;&#45;padding">-->
										<!--											<el-date-picker-->
										<!--												v-model="queryParams.time"-->
										<!--												type="date"-->
										<!--											/>-->
										<!--											<div class="plan-add-planning&#45;&#45;right-text">第x阶段</div>-->
										<!--										</div>-->
									</el-form-item>
									<el-form-item>
										<div class="plan-add-planning--view">
											<el-input v-model="queryParams.textarea1" style="width: 100%" :rows="3"
												resize="none" type="textarea"
												placeholder="组织意向购车者到上港赛道进行试驾，并邀请专业赛车手进行驾驶购车者体验车型卓越操控，邀请媒体报道" />
											<!--											<el-icon class="plan-add-planning&#45;&#45;refresh">-->
											<!--												<Refresh />-->
											<!--											</el-icon>-->
										</div>
									</el-form-item>
									<el-form-item label="策略" required></el-form-item>
									<el-form-item>
										<div class="plan-add-planning--view">
											<el-input v-model="queryParams.textarea2" style="width: 100%" :rows="3"
												resize="none" type="textarea"
												placeholder="专业赛道，顶级体验；体验车手驾驶，机会难得；全方位展现汽车参数" />
											<!--											<el-icon class="plan-add-planning&#45;&#45;refresh">-->
											<!--												<Refresh />-->
											<!--											</el-icon>-->
										</div>
									</el-form-item>
									<el-form-item label="其他补充描述："></el-form-item>
									<el-form-item class="el-form-pre-line">
										<div class="plan-add-planning--view">
											<div class="padding-20-lr plan-add-planning--check-content">
												<el-checkbox-group v-model="queryParams.checkLists">
													<el-checkbox v-for="selectCheckList in selectCheckLists"
														:label="selectCheckList.name" :value="selectCheckList.value" />
												</el-checkbox-group>
											</div>
											<!--											<el-icon class="plan-add-planning&#45;&#45;refresh">-->
											<!--												<Refresh />-->
											<!--											</el-icon>-->
										</div>
									</el-form-item>
								</el-form>
							</div>
						</div>
						<div class="app-footer footer-bar border--top">
							<div class="row-option" v-if="page == 1">
								<el-button class="footer-button" type="primary" plain @click="goNext">大纲生成</el-button>
							</div>
							<div class="row-option" v-if="page == 2">
								<el-button class="footer-button" type="primary" plain
									@click="getArticleLists">换一换</el-button>
								<el-button class="footer-button" type="primary" plain
									@click="goFinallyOutline">综合生成</el-button>
							</div>
						</div>
					</div>
				</div>
				<div class="plan-right" v-if="page == 2" v-loading="articleInfoLoading">
					<div class="padding-20-lr plan-add-planning--select-articles position--relative">
						<el-radio-group v-model="queryParams.checkArticleList">
							<div class="plan-add-planning--select-article position--relative"
								v-for="selectArticleList in selectArticleLists">
								<div class="select-article-title vi-view-title">
									<div class="select-article-change-title">{{ selectArticleList.theme }}</div>
									<div class="select-article-reset" @click="articleEditClick(selectArticleList)">
										<img v-if="selectArticleList.articleEdit" src="/images/edit-pen-close.png" />
										<img v-else src="/images/edit-pen-active.png" />
									</div>
								</div>
								<div class="select-article-content center-position">
									<div class="select-article-view" v-for="content in selectArticleList.content">
										<edit-div class="select-article-content-view"
											:contenteditable="selectArticleList.articleEdit" :content="content.section"
											@update:content="content.section = $event"></edit-div>
										<div class="select-article-content-view--subsection-parent">
											<edit-div
												class="select-article-content-view select-article-content-view--subsection"
												:contenteditable="selectArticleList.articleEdit"
												v-for="(subsection, index) in content.subsections" :content="subsection"
												@update:content="content.subsections[index] = $event"></edit-div>
										</div>
									</div>
								</div>
								<div class="select-article-footer center-position-left">

									<el-radio label="设置备选" :value="selectArticleList"></el-radio>
								</div>
							</div>
						</el-radio-group>
						<!--						<div class="select-articles-add-number border&#45;&#45;all">-->
						<!--							<span class="select-articles-clear-number" @click="clearSelectArticles">清空</span>-->
						<!--							<el-badge class="center-position" :value="queryParams.checkArticleLists.length">-->
						<!--								<el-icon class="select-articles-add-number-icon">-->
						<!--									<ShoppingCart />-->
						<!--								</el-icon>-->
						<!--							</el-badge>-->
						<!--						</div>-->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="work-planning-add-planning">
import { reactive, ref, onMounted } from "vue";
import { Refresh, ShoppingCart } from "@element-plus/icons-vue";
import { router, service,storage } from "/@/cool";
import { config } from "/@/utils/global";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { wholeToParse } from "/@/utils/tools";
import EditDiv from "/@/components/EditDiv.vue";
let route = useRoute();
let page = ref(1);
let queryParams = reactive({
	name: "",
	time: "",
	tags: [],
	textarea1: "",
	textarea2: "",
	checkLists: [],
	checkArticleList: <any>{}
})
let deleteTags = reactive<string[]>([])
const deleteTag = (tag: string, index: number) => {
	queryParams.tags.splice(index, 1);
	deleteTags.push(tag);
}
interface dictValue {
	name: String
	value: String
}
let selectCheckLists = ref<dictValue[]>([])
//获取关键词
const clusterTagParams = reactive({
	"inputs": {
		"celuebiaoqian": "",
		"paichu": ""
	},
	...config.AI_PARAMS
})
let planInfoLoading = ref(false)
const getPlanTagType = async () => {
	planInfoLoading.value = true;
	let answer: any = routeQuery?.value.answer || "";
	clusterTagParams.inputs.celuebiaoqian = answer;
	clusterTagParams.inputs.paichu = deleteTags.join("、");
	let { other: others } = await service.dict.info.data({ types: ["other"] });
	let values = await service.base.open.plantagType(clusterTagParams).catch((error) => {
		ElMessage({
			message: error.message || "加载失败",
			type: 'warning',
		})
		planInfoLoading.value = false;
		return;
	}).finally(() => {
		planInfoLoading.value = false;
	});
	let data = wholeToParse(values);
	let answerValue: any = data?.answer || "";
	queryParams.tags = answerValue?.audience?.split(",");
	selectCheckLists.value = others;
	queryParams.textarea1 = answerValue?.scene;
	queryParams.textarea2 = answerValue?.strategy;
}
let selectArticleLists = ref<any[]>([]);
const clearSelectArticles = () => {
	queryParams.checkArticleList = {};
}
//根据关键词生成备选大纲
const outlineParams = reactive({
	"inputs": {
		"Type_of_energy": "燃油车",
		"query": "",
		"can": "",
		"number": 2
	},
	...config.AI_PARAMS
})
let articleInfoLoading = ref(false);
const getArticleLists = async () => {
	if (articleInfoLoading.value) { return };
	articleInfoLoading.value = true
	let answer: any = route.query?.answer || "";
	outlineParams.inputs.query = answer + "\n主题：\n" + queryParams.checkLists.join("\n");
	let can = "受众：" + queryParams.tags.join("、") + "\n场景：" + queryParams.textarea1 + "\n策略：\n" + queryParams.textarea2;
	outlineParams.inputs.can = can;
	let articleLists = await service.base.open.outline(outlineParams).catch((error) => {
		ElMessage({
			message: error.message || "加载失败",
			type: 'warning',
		})
		articleInfoLoading.value = false;
		return;
	}).finally(() => {
		articleInfoLoading.value = false;
	});
	let value = wholeToParse(articleLists);
	selectArticleLists.value = value.answer?.data;
}
let articleEdit = ref(false);
const articleEditClick = (selectArticleList: any) => {
	selectArticleList.articleEdit = !selectArticleList.articleEdit;
}
const goNext = () => {
	if (queryParams.tags.length <= 0 || !queryParams.textarea1 || !queryParams.textarea2) {
		ElMessage({
			message: "请输入关键提示词",
			type: 'warning',
		})
		return;
	}
	page.value = 2;
	getArticleLists();
}
const goFinallyOutline = () => {
	if (!queryParams.checkArticleList.theme) {
		ElMessage({
			message: "请选择一条大纲数据",
			type: 'warning',
		})
		return;
	}
	storage.set("outline",queryParams.checkArticleList.content)
	let query = {
		theme: queryParams.checkArticleList.theme,
	} as any;
	let answer = routeQuery?.value.answer || "";
	if(answer){
		let planValue:any = storage.get("planValue") || {};
		planValue.answer = answer;
		storage.set("planValue",planValue);
	}
	router.push({
		path: "/work/planning/confirm-outline",
		query: query
	})
}
let routeQuery:any = ref(null);
onMounted(()=>{
	storage.set("pageType","planning")
	routeQuery.value = route.query;
})
</script>

<style scoped lang="scss">
.select-article-change-title {
	width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.select-article-title {
	width: 100%;
	display: flex;
	justify-content: space-between
}

.plan-add-planning {
	.plan-left {
		width: 560px;
	}
}

::-webkit-scrollbar {
	display: none;
}

.plan-add-planning {
	&--title {
		font-weight: 700;
		color: #000000;
		font-size: 30px;
		line-height: 32px;
	}

	&--inputs {
		padding: 20px 0;
		box-sizing: border-box;

		.el-form-item__label {
			font-weight: 400;
			font-size: 18px;
			color: #666666;
		}

		.el-form-item {
			width: 100%;
			overflow: hidden;
			margin-bottom: 10px;

			&.el-form-item-line {
				width: auto;
			}
		}
	}

	&--tags {
		width: 100%;
		box-sizing: border-box;
		height: 100px;
		overflow: hidden;
		overflow-y: auto;
	}

	&--view {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&--padding {
			padding-right: 66px;
			box-sizing: border-box;
		}
	}

	&--tag {
		margin: 0 10px;
	}

	&--refresh {
		width: 26px;
		font-size: 26px;
		margin: 0 20px;
		color: #000000;
		cursor: pointer;
	}

	&--right-text {
		font-size: 14px;
		color: #666666;
		line-height: 14px;
	}

	&--check-content {
		max-height: calc(100vh - 680px);
		overflow: hidden;
		overflow-y: auto;
	}

	&--select-articles {
		height: 100%;

		.select-articles-clear-number {
			position: absolute;
			right: 0;
			top: 0;
			color: var(--el-color-primary);
			font-size: 16px;
			font-weight: 700;
			cursor: pointer;
		}

		.select-articles-add-number {
			right: 40px;
			top: 40px;
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 50%;

			.select-articles-add-number-icon {
				color: #666666;
				font-size: 30px;
			}
		}
	}

	&--select-article {
		width: 50%;
		min-width: 500px;
		height: 100%;
		box-sizing: border-box;
		padding: 40px;

		.select-article-content {
			width: 80%;
			max-width: 400px;
			max-height: calc(100% - 200px);
			overflow: hidden;
			overflow-y: auto;
		}

		.select-article-content-title,
		.select-article-content-view {
			width: 100%;
			font-weight: 700;
			color: #000000;
			font-size: 20px;
			line-height: 24px;
			margin-top: 10px;
			margin-bottom: 10px;
			cursor: pointer;
			padding: 10px;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
            box-sizing: border-box;
			&--subsection-parent{
				width: 100%;
				font-size: 16px;
				padding-left: 2em;
				box-sizing: border-box;
			}
			&--subsection {
				font-size: 16px;
				line-height: 20px;
				margin-top: 0px;
				margin-bottom: 0px;
				color: #333333;
			}
		}

		.select-article-footer {
			bottom: 10px;
		}

		.select-article-reset {
			width: 24px;
			margin: 0;
			cursor: pointer;

			img {
				width: 70%;
			}
		}
	}
}

:deep(.el-form-pre-line) {
	.el-checkbox {
		height: auto;
	}

	.el-checkbox__label {
		white-space: pre-line;
		line-height: 16px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

.plan-add-planning--select-articles {
	.el-radio-group {
		display: flex;
		height: 100%;
	}

	.plan-add-planning--select-article+.plan-add-planning--select-article {
		border-left: 1px solid #dedede;
	}
}
</style>
